<template>
	<div class="goods-list">
		<div class="goods" v-for="item in goodsList" :key="item">
			<div class="goods-img">
				<img :src="item.cover" alt="">
			</div>
			<h3>{{ item.name }}</h3>
			<h3>{{ item.price }}元</h3>
			<el-button type="success" size="large">添加</el-button>
		</div>
	</div>
</template>

<script setup>
import { getGoodsList } from '../api/goods'
import { ref } from "vue"

const goodsList = ref([]),
	total = ref(0)

getGoodsList("63e71c09d0f7c47e678f6fb5").then((res) => {
	total.value = res.total
	goodsList.value = res.data
})
</script>

<style lang="scss" scoped>
.goods-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-height: 770px;
	overflow-y: scroll;

	.goods {
		display: flex;
		flex-direction: row;
		flex: 1;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		min-height: 0;
		height: 80px;
		padding: 1rem;
		border: 1px solid black;
		border-radius: 10px;
	}
}
</style>